<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="../../../doc/css/core.css" media="all" />
		<style>
			.demo-drag{width:100px;height:100px;background:red;position:absolute;top:0;
			left:0;}
			.proxy{background:#F37066;height:22px;width:100px;text-indent:10px;color:#fff;}
			.test{position:absolute;top:10px;right:10px;
			width:100px;
			height:100px;border:1px solid #ccc;}
			.test2{
				position:absolute;top:200px;right:10px;
			width:100px;
			height:100px;border:1px solid red;
			}
			div.container{
				width:1000px;
				position:relative;
			}
			.container table{
				table-layout:fixed;
				width:100%;
			}
			.container td{
				width:100px;
				height:100px;
				border:1px solid #ddd;
				font-size:16px;
				text-align:center;
				font-weight:bolder;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="test" class="demo-drag">I can be drag</div>
			<table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
				</tr>
				<tr>
					<td>11</td>
					<td>12</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div class="test" style="width:300px;height:200px;">
			<p style="background:red">sdfsdfsdf</p>
			<iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0">
				
			</iframe>
		</div>
		<div class="test2">
			sdfsdfsdfsdf
		</div>
		<script type="text/javascript" src="../../jquery.js"></script>
		<script type="text/javascript" src="../SimpleCore.js"></script>
		<script type="text/javascript" src="SimpleDrag.js"></script>
		<script type="text/javascript">
			$(".demo-drag").drag({
				proxy:function(){
					return $(this).clone().empty().css("opacity","0.5");
				},
				dropElements:"td",
				grid:[101,100],
				revert:true,
				ondragdrop:function(source,droped){
					droped.css("background","#4b8b20")
				},
				ondragenter:function(source,droped){
					droped.css("background","yellow")
				},
				ondragleave:function(source,droped){
					droped.css("background","#fff")
				}
			});
			$(".test").drag({
				handle:"p",
				iframeFix:true
			})
		</script>
	</body>
</html>
